.json {
  &.root {
  }

  ~ .root {
    margin-top: 40px;
  }

  .title {
    display: flex;
    flex-wrap: nowrap;

    label {
      margin-right: 30px;
      font-weight: bold;

      &:after {
        content: " : ";
        display: inline;
      }
    }
  }

  .row-list {
    background-color: rgb(187 234 255);
    border-radius: 8px;
  }

  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0px 4px;
    margin: 2px;
    align-items: center;

    > *:not(:first-child) {
      margin-left: 4px;
    }

    > * {
      margin-top: 4px;
      margin-bottom: 4px;
      flex-shrink: 0;
      width: auto;
    }

    .key {
      width: 280px;
    }

    .type {
      width: 120px;
    }

    .multi {
      width: 80px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
    }

    .stringType {
      width: 120px;
    }

    .enumData {
      width: 200px;
    }

    .remark {
      width: 360px;
    }

  }

  button {
    font-size: 20px;
    padding: 0;
    width: 36px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }


  .rbtn {
    width: 120px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;

    button {
      flex: 1;
    }
  }

  .sub {
    margin-left: 40px;
  }
}